<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <script src="lib/vue.min.js"></script>
    <script src="lib/moment.min.js"></script>
    <script src="lib/antd.min.js"></script>
    <link rel="stylesheet" href="lib/antd.min.css">
    <link rel="stylesheet" href="lib/style.css">
    <!-- 图标 -->
    <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
</head>
<body>
    <div class="content" id = "app">
        <!--查询条件-->
        <a-card :bordered="false" hoverable  :body-style="{marginBottom:'15px'}">
            <a-row>
                <a-col class="btnWrap" :sm="24" :md="4">
                    <a-statistic v-if="data.isShow" :title="'共有' + data.tags  + '页面'" :value="data.number" :value-style="{ color: '#666' }" style="margin-right: 50px">
                        <template #prefix>
                            <a-avatar slot="avatar" :style="{backgroundColor:data.titleIconColor}"><i :class="'fa fa-' + data.titleIcon"></i></a-avatar>
                        </template>
                        <template #suffix>
                          <span style="font-weight: normal;font-size: 14px">个</span>
                        </template>
                    </a-statistic>
                    <a-statistic v-if="!data.isShow" :title="'共有' + data.searchWord  + '页面'" :value="data.number" :value-style="{ color: '#666' }" style="margin-right: 50px">
                        <template #prefix>
                            <a-avatar slot="avatar" :style="{backgroundColor:data.titleIconColor}"><i :class="'fa fa-' + data.titleIcon"></i></a-avatar>
                        </template>
                        <template #suffix>
                            <span style="font-weight: normal;font-size: 14px">个</span>
                        </template>
                    </a-statistic>
                </a-col>
                <a-col :sm="24" :md="8" style="padding-top: 15px;">
                    <a-input-search placeholder="请输入搜索文本" v-model:value="data.searchValue" enter-button @search="onSearch" />
                </a-col>
                <a-col :sm="24" :md="6" class="clearfix">
                    <a-button  @click="resetSearch" style="margin-top: 15px;float: left;margin-left: 10px;"><i class="fa fa-refresh"></i>重置</a-button>
                    <a-button type="danger" @click="data.visible = true" style="margin-top: 15px; float: right;"><i class="fa fa-question-circle"></i>使用方法</a-button>
                </a-col>
                <a-col :sm="24" :md="6" style="text-align: right;">
                    <a-radio-group style="margin-top: 15px;" :value="data.dataTag" @change="handleSizeChange">
                        <a-radio-button v-for="(item,index) in data.tagData" :key="index" :value="item">
                            {{ item }}
                        </a-radio-button>
                    </a-radio-group>
                </a-col>
            </a-row>
        </a-card>
        <!--列表-->
        <a-card :bordered="false" hoverable style="min-height: 326px;">
            <template #title>
                <span class="titIcon fl"><i class="fa fa-book"></i></span>
                <span content="fl" class="setTitle">{{ data.htmlTitle }}</span>
            </template>
            <a-table :data-source="data.dataSource" :columns="data.columns" :pagination="data.pagination" :locale="{emptyText: '暂无数据'}">
                <template #tag="{ text }">
                      <span>
                          <a-tag :color="text === '电脑端' ? 'volcano' : 'green'">{{ text }}</a-tag>
                      </span>
                </template>
                <template #name="{ text }">
                    <a class="tableLink" :href ="data.link + text + '.html'" target="_blank" v-html="highLight(String(text))"></a>
                </template>
            </a-table>
        </a-card>
        <!-- 说明弹窗 -->
        <a-modal v-model:visible="data.visible" class="examples" width="600px" title="使用方法" :footer="null"  @ok="hideModal">
            <div v-html="data.htmlData"></div>
        </a-modal>
    </div>
    <!--数据文件-->
    <script src="lib/data.js"></script>
    <!--js文件-->
    <script src="lib/main.js"></script>
</body>
</html>
